<template>
  <div>
    <!-- 客户列表 -->
    <div class="table_card">
      <!-- 新增客户 -->
      <el-dialog
        title="新增客户"
        :visible.sync="newClientdialogVisible"
        width="744px"
        :before-close="CancelClientSubmit"
      >
        <span>
          <div>
            <el-form
              ref="newClientForm"
              :rules="newClientRules"
              :model="newClientForm"
            >
              <el-row :gutter="40">
                <el-col :span="8">
                  <el-form-item label="客户姓名" prop="name">
                    <el-input
                      class="w-100"
                      v-model="newClientForm.name"
                      placeholder="请输入客户姓名"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户手机号1" prop="mobile">
                    <el-input
                      class="w-100"
                      v-model="newClientForm.mobile"
                      placeholder="请输入客户手机号1"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="客户性别" prop="sex">
                    <el-select
                      v-model="newClientForm.sex"
                      placeholder="请选择"
                      class="w-100"
                    >
                      <el-option
                        v-for="item in Sexoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="客户来源" prop="sourceId">
                    <el-select
                      v-model="newClientForm.sourceId"
                      placeholder="请选择客户来源"
                      class="w-100"
                    >
                      <el-option
                        v-for="item in ClientSourceData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="门店" prop="storeId">
                    <el-select
                      v-model="newClientForm.storeId"
                      placeholder="请选择门店"
                      class="w-100"
                      filterable
                    >
                      <el-option
                        v-for="item in this.$store.state.user.stores"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="卡号" prop="cardNumber">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="newClientForm.cardNumber"
                      placeholder="请输入卡号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="本金" prop="principal">
                    <el-input-number
                      :precision="2"
                      :step="0.1"
                      :min="0"
                      :controls="false"
                      class="w-100 text-left"
                      type="text"
                      v-model="newClientForm.principal"
                      placeholder="请输入本金"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="赠金" prop="giveMoney">
                    <el-input-number
                      :precision="2"
                      :step="0.1"
                      :min="0"
                      :controls="false"
                      class="w-100 text-left"
                      type="text"
                      v-model="newClientForm.giveMoney"
                      placeholder="请输入赠金"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="额外赠送金" prop="extraMoney">
                    <el-input-number
                      :precision="2"
                      :step="0.1"
                      :min="0"
                      :controls="false"
                      class="w-100 text-left"
                      type="text"
                      v-model="newClientForm.extraMoney"
                      placeholder="请输入额外赠送金"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建时间" prop="createTime">
                    <el-date-picker
                      v-model="newClientForm.createTime"
                      type="date"
                      class="w-100"
                      placeholder="请选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="CancelClientSubmit"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="ClientSubmit(0)"
            :loading="newClientLoading"
            :disabled="newClientCardLoading"
            >确 定</el-button
          >
          <!-- <el-button
            type="primary"
            :loading="newClientCardLoading"
            @click="ClientSubmit(1)"
            :disabled="newClientLoading"
            >确定并办卡</el-button
          > -->
        </span>
      </el-dialog>
      <!-- 用户信息 弹框 展示-->
      <el-dialog
        :visible.sync="MemberInfodialogVisible"
        width="1600px"
        class="no-dialog-padding no-dialog-header-padding"
        :before-close="handleCloseUserInfo"
      >
        <span>
          <div class="memberInfo_box">
            <div class="left_box">
              <div class="member_img">
                <img src="@/assets/logo/1.jpg" alt="" />
                <button class="memeber_logotype">
                  {{ customerTypeObj[UserBasicInfo.customerType] }}
                </button>
              </div>
              <div class="member_username">{{ UserBasicInfo.name }}</div>
              <div class="desc_content">
                <div class="div1">
                  <div class="div2">手机号:</div>
                  <div class="copy">
                    <div class="title_Desc">{{ UserBasicInfo.mobile }}</div>
                    <div
                      v-clipboard:copy="UserBasicInfo.mobile"
                      v-clipboard:success="clipboardSuccess"
                    >
                      <img src="@/assets/logo/copy.png" alt="" />
                    </div>
                  </div>
                </div>
                <div class="div1" v-if="!!UserBasicInfo.mobile2">
                  <div class="div2">备用手机号:</div>
                  <div class="copy">
                    <div class="title_Desc">{{ UserBasicInfo.mobile2 }}</div>
                    <div
                      v-clipboard:copy="UserBasicInfo.mobile2"
                      v-clipboard:success="clipboardSuccess"
                    >
                      <img src="@/assets/logo/copy.png" alt="" />
                    </div>
                  </div>
                </div>
                <div class="div1">
                  <div class="div2">出生日期:</div>
                  <div class="title_Desc">{{ UserBasicInfo.birthday }}</div>
                </div>
                <div class="div1">
                  <div class="div2">客户来源:</div>
                  <div class="title_Desc">{{ UserBasicInfo.sourceName }}</div>
                </div>
                <div class="div1">
                  <div class="div2">推荐员工:</div>
                  <div class="title_Desc">{{ UserBasicInfo.referrerName }}</div>
                </div>
                <div class="div1">
                  <div class="div2">发展门店:</div>
                  <div class="title_Desc">
                    {{ UserBasicInfo.firstStoreName }}
                  </div>
                </div>
                <div class="div1">
                  <div class="div2">归属门店:</div>
                  <div class="title_Desc">
                    {{ UserBasicInfo.ownedStoreName }}
                  </div>
                </div>
                <div class="div1">
                  <div class="div2">登记日期:</div>
                  <div class="title_Desc">{{ UserBasicInfo.createTime }}</div>
                </div>
              </div>
            </div>
            <div class="right_box">
              <div class="balc_box">
                <div class="balance_left">
                  <div @click="UpdatePsd" class="updatePwd">修改密码</div>
                  <div class="repeatPsd" @click="revise">重置密码</div>
                </div>
                <div class="balance_nav">
                  <div class="balance_nav_list">
                    <div class="balance">
                      {{ UserBasicFundInfo.totalBalance }}
                    </div>
                    <div class="balance_desc">卡内余额（元）</div>
                  </div>
                  <div class="balance_nav_list">
                    <div class="balance">
                      {{ UserBasicFundInfo.blockedBalances }}
                    </div>
                    <div class="balance_desc">冻结余额（元）</div>
                  </div>
                  <div class="balance_nav_list">
                    <div class="balance">
                      {{ UserBasicFundInfo.totalTopUp }}
                    </div>
                    <div class="balance_desc">累计充值（元）</div>
                  </div>
                  <div class="balance_nav_list">
                    <div class="balance">
                      {{ UserBasicFundInfo.totalGiveMoney }}
                    </div>
                    <div class="balance_desc">累计赠送（元）</div>
                  </div>
                  <div class="balance_nav_list">
                    <div class="balance">
                      {{ UserBasicFundInfo.totalConsume }}
                    </div>
                    <div class="balance_desc">累计消费（元）</div>
                  </div>
                </div>
              </div>

              <div class="balance_operate">
                <div class="cut_nav_box">
                  <button
                    :class="activeIndex === 1 ? 'active' : ''"
                    class="btn-box_small"
                    @click="CutTab(1)"
                  >
                    会员卡
                  </button>

                  <button
                    :class="activeIndex === 2 ? 'active' : ''"
                    class="btn-box_small"
                    @click="CutTab(2)"
                  >
                    消费记录
                  </button>
                  <button
                    :class="activeIndex === 3 ? 'active' : ''"
                    class="btn-box_small"
                    @click="CutTab(3)"
                  >
                    储值交易记录
                  </button>
                  <button
                    :class="activeIndex === 4 ? 'active' : ''"
                    class="btn-box_small"
                    @click="CutTab(4)"
                  >
                    转账列表
                  </button>
                </div>

                <!-- 会员卡 -->
                <div
                  class="member_info_content"
                  v-show="this.activeIndex === 1"
                >
                  <el-row :gutter="34">
                    <el-col
                      :span="8"
                      v-for="(item, index) in MemberCardList"
                      :key="index"
                    >
                      <div class="content_box">
                        <div class="style2">
                          <div
                            class="ey_top"
                            :class="item.state === 2 ? 'dis' : ''"
                          >
                            {{ item.cardName }}
                          </div>
                          <div class="cardNumber" v-if="item.state === 1">
                            {{ item.cardNumber }}
                          </div>
                          <div class="expiration_date">
                            <!-- {{ item.indate }}前有效 -->
                            <div v-if="item.state === 2">已冻结</div>
                            <div v-if="item.state === 3">有效期过期</div>
                            <div v-if="item.state === 4">休眠</div>
                          </div>

                          <div class="my_wallet">
                            <div
                              class="my_wallet_left"
                              v-if="item.cardType === 'M'"
                            >
                              <div class="rest_wallet">
                                {{ item.balance }}
                                <span class="textDesc"
                                  >本金: {{ item.principal }}</span
                                >
                                <span class="extraDesc"
                                  >赠金:
                                  {{
                                    (item.giveMoney + item.extraMoney).toFixed(
                                      2
                                    )
                                  }}</span
                                >
                                <span
                                  class="frezz"
                                  v-if="item.balanceBlocked > 0"
                                  >冻结:({{ item.balanceBlocked }})</span
                                >
                              </div>
                              <div class="balance_text">卡内余额（元）</div>
                            </div>
                            <!-- 次卡数量 -->
                            <div
                              class="my_wallet_left"
                              v-if="item.cardType === 'C'"
                            >
                              <div class="rest_wallet">
                                {{ item.itemCount }}
                              </div>
                              <div class="balance_text">剩余次数</div>
                            </div>
                            <div class="my_wallet_right">
                              <!-- <img
                                  src="../../../assets/logo/Group.png"
                                  alt=""
                                /> -->
                            </div>
                          </div>
                          <div class="bottom_content">
                            <div
                              class="default_button"
                              @click="thawCard(item)"
                              v-if="
                                item.state === 2 ||
                                item.state === 3 ||
                                item.state === 4
                              "
                            >
                              <div class="frezz">解冻</div>
                            </div>
                            <div class="content_boxs">
                              <div
                                class="select_box"
                                v-if="item.haveCard && item.state === 1"
                              >
                                <el-dropdown
                                  trigger="click"
                                  @command="
                                    (command) => handleCommand(command, item)
                                  "
                                >
                                  <span class="el-dropdown-link select_text">
                                    更多操作<i
                                      class="el-icon-arrow-down el-icon--right"
                                    ></i>
                                  </span>
                                  <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item
                                      command="c"
                                      v-if="item.haveCard"
                                    >
                                      <div
                                        v-hasPermi="['customer:card:freeze']"
                                      >
                                        冻结
                                      </div>
                                    </el-dropdown-item>

                                    <el-dropdown-item
                                      command="d"
                                      v-if="
                                        item.haveCard && item.cardType === 'M'
                                      "
                                    >
                                      <div v-hasPermi="['customer:card:back']">
                                        退卡
                                      </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                      command="x"
                                      v-if="item.haveCard"
                                    >
                                      <div
                                        v-hasPermi="[
                                          'customer:card:updateThaw:money',
                                        ]"
                                      >
                                        解冻余额
                                      </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                      command="y"
                                      v-if="item.haveCard"
                                    >
                                      <div
                                        v-hasPermi="[
                                          'customer:card:edit:cardNumber',
                                        ]"
                                      >
                                        修改卡号
                                      </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                      command="l"
                                      v-if="item.haveCard"
                                    >
                                      <div
                                        v-hasPermi="[
                                          'customer:card:adjustment',
                                        ]"
                                      >
                                        修改余额
                                      </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                      command="j"
                                      v-if="item.haveCard"
                                    >
                                      <div
                                        v-hasPermi="[
                                          'customer:card:offsetting',
                                        ]"
                                      >
                                        冲减
                                      </div>
                                    </el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8"> </el-col>
                  </el-row>
                </div>
                <!-- 消费记录 -->
                <div class="consume_record" v-show="activeIndex === 2">
                  <div class="table_list" style="margin: 0px">
                    <el-table
                      :data="ConsumptionData"
                      stripe
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="orderMoneyMeet"
                        label="账单金额（元）"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="payType"
                        label="支付方式"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="storeName"
                        label="服务门店"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column prop="userNameStr" label="服务技师">
                      </el-table-column>
                      <el-table-column prop="orderOpen" label="下单时间">
                      </el-table-column>
                      <el-table-column prop="orderClose" label="关单时间">
                      </el-table-column>
                    </el-table>
                  </div>
                  <pagination
                    :total="total1"
                    :page.sync="queryParams1.pageNo"
                    :limit.sync="queryParams1.pageSize"
                    @pagination="ConsumptionList"
                  />
                </div>
                <!-- 储值交易记录 -->
                <div class="consume_record" v-show="activeIndex === 3">
                  <div class="table_list" style="margin: 0px">
                    <el-table
                      :data="WalletDetailList"
                      stripe
                      style="width: 100%"
                      border
                    >
                      <el-table-column
                        prop="orderNo"
                        label="关联账单"
                        width="160px"
                      >
                        <template slot-scope="scope">
                          <div
                            @click="CheckOrder(scope.row)"
                            style="color: #0079fe"
                            v-if="scope.row.type === 2"
                          >
                            <span class="orderNo">{{ scope.row.orderNo }}</span>
                          </div>
                          <div v-else>{{ scope.row.orderNo }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" prop="typeDesc" width="80">
                      </el-table-column>
                      <el-table-column
                        prop="cardNumber"
                        label="会员卡"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="statementPrincipal"
                        label="变动本金"
                      >
                        <template slot-scope="scope">
                          <span
                            :class="
                              scope.row.type === 1 || scope.row.type === 4
                                ? 'rechargeColor'
                                : scope.row.type === 2 ||
                                  scope.row.type === 5 ||
                                  scope.row.type === 6
                                ? 'consumeColor'
                                : ''
                            "
                          >
                            <span>{{
                              scope.row.type === 1 || scope.row.type === 4
                                ? "+"
                                : scope.row.type === 2 ||
                                  scope.row.type === 5 ||
                                  scope.row.type === 6
                                ? "-"
                                : ""
                            }}</span
                            >{{ scope.row.statementPrincipal }}</span
                          >
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="statementGiveMoney"
                        label="变动赠送金"
                        width="100px"
                      >
                        <template slot-scope="scope">
                          <span
                            :class="
                              scope.row.type === 1 || scope.row.type === 4
                                ? 'rechargeColor'
                                : scope.row.type === 7 || scope.row.type === 8
                                ? 'disableColor'
                                : scope.row.type === 2 ||
                                  scope.row.type === 5 ||
                                  scope.row.type === 6
                                ? 'consumeColor'
                                : ''
                            "
                          >
                            <span>{{
                              scope.row.type === 1 || scope.row.type === 4
                                ? "+"
                                : scope.row.type === 2 ||
                                  scope.row.type === 5 ||
                                  scope.row.type === 6
                                ? "-"
                                : ""
                            }}</span
                            >{{ scope.row.statementGiveMoney }}</span
                          >
                        </template>
                      </el-table-column>
                      <el-table-column prop="surplusPrincipal" label="结余本金">
                      </el-table-column>
                      <el-table-column
                        prop="surplusGiveMoney"
                        label="结余赠送金"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column prop="surplusBalance" label="合计余额">
                      </el-table-column>
                      <el-table-column
                        prop="operateDeptName"
                        label="操作门店"
                        :show-overflow-tooltip="true"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="createTime"
                        label="变动时间"
                        width="160px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="chargingTime"
                        label="记账时间"
                        width="180px"
                      >
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            @click="back(scope.row)"
                            v-if="scope.row.type === 6"
                            v-hasPermi="[
                              'customer:account-statement:backCardFallback',
                            ]"
                            >回退</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <pagination
                    :total="total2"
                    :page.sync="queryParams2.pageNo"
                    :limit.sync="queryParams2.pageSize"
                    @pagination="getWalletDetails"
                  />
                </div>
                <!-- 转账列表 -->
                <div class="consume_record" v-show="activeIndex === 4">
                  <div class="table_list" style="margin: 0px">
                    <el-table
                      :data="TransferList"
                      stripe
                      style="width: 100%"
                      border
                    >
                      <el-table-column
                        prop="memberInName"
                        label="转入会员名称"
                        width="110px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="memberOutName"
                        label="转出会员名称"
                        width="120px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cardIdInName"
                        label="转入会员卡名称"
                        width="120px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cardNumberIn"
                        label="转入会员卡编号"
                        width="120px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cardIdOutName"
                        label="转出会员卡名称"
                        width="120px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cardNumberOut"
                        label="转出会员卡编号"
                        width="120px"
                      >
                      </el-table-column>
                      <el-table-column prop="principal" label="本金">
                      </el-table-column>
                      <el-table-column prop="giveMoney" label="赠送金">
                      </el-table-column>
                      <el-table-column
                        prop="extraMoney"
                        label="额外赠送金"
                        width="120px"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="createTime"
                        label="转账时间"
                        width="150px"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                  <pagination
                    :total="totals"
                    :page.sync="TransferParams.pageNo"
                    :limit.sync="TransferParams.pageSize"
                    @pagination="TransferPages"
                  />
                </div>
              </div>
            </div>
          </div>
        </span>
      </el-dialog>

      <!-- 会员充值 -->
      <el-dialog
        :visible.sync="MemberdialogVisible"
        width="400px"
        title="会员充值"
        class="no-dialog-padding"
        :before-close="handleCloseMember"
      >
        <span>
          <div class="recharge_form">
            <el-form
              ref="MemberdialogForm"
              :rules="MemberdialogRules"
              :model="MemberdialogForm"
            >
              <el-row>
                <el-form-item label="次卡类型" prop="cardType">
                  <el-select
                    v-model="MemberdialogForm.cardType"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                    :disabled="!MemberdialogForm.isAdd"
                  >
                    <el-option
                      v-for="item in cardTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row v-if="MemberdialogForm.cardType === 'M'">
                <el-form-item label="会员卡号" prop="cardNumber">
                  <el-input
                    class="w-100"
                    v-model="MemberdialogForm.cardNumber"
                    :disabled="!!MemberdialogForm.isNew ? false : true"
                    placeholder="请输入会员卡号"
                    :maxlength="20"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row :gutter="10" v-if="MemberdialogForm.cardType === 'M'">
                <el-col :span="12">
                  <el-form-item label="充值金额" prop="principal">
                    <el-input
                      class="w-100"
                      type="number"
                      @input="changeGetGiveMoney('a')"
                      v-model="MemberdialogForm.principal"
                      placeholder="请输入充值金额"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="give">
                    赠送金额: {{ MemberdialogForm.giveMoney }}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="40" v-if="MemberdialogForm.cardType === 'M'">
                <el-col>
                  <el-form-item prop="Money">
                    <el-input
                      class="w-100"
                      v-model="MemberdialogForm.Money"
                      :readonly="true"
                      placeholder="金额大写显示区域"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="MemberdialogForm.cardType === 'M'">
                <el-form-item label="额外赠送金额" prop="extraMoney">
                  <el-input-number
                    v-model="MemberdialogForm.extraMoney"
                    :min="1"
                    :max="10000"
                    :precision="2"
                    class="w-100 text-left"
                    placeholder="请输入赠送金额"
                    :controls="false"
                  ></el-input-number
                ></el-form-item>
              </el-row>

              <el-row>
                <el-form-item
                  label="充值方式"
                  prop="payWay"
                  v-if="MemberdialogForm.cardType === 'M'"
                >
                  <el-select
                    v-model="MemberdialogForm.payWay"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                  >
                    <el-option
                      v-for="item in payWayOpention"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item
                  label="项目"
                  prop="itemId"
                  v-if="MemberdialogForm.cardType === 'C'"
                >
                  <el-select
                    v-model="MemberdialogForm.itemId"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                    :loading="storeUserLoading"
                  >
                    <el-option
                      v-for="item in AllProjectList"
                      :key="item.itemId"
                      :label="item.itemName"
                      :value="item.itemId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item
                  label="次数"
                  prop="itemCount"
                  v-if="MemberdialogForm.cardType === 'C'"
                >
                  <el-input-number
                    v-model="MemberdialogForm.itemCount"
                    :min="0"
                    :precision="0"
                    class="w-100 text-left"
                    placeholder="请输入次数"
                    :controls="false"
                  ></el-input-number
                ></el-form-item>
              </el-row>
              <el-row>
                <el-form-item
                  label="卷码"
                  prop="cardNo"
                  v-if="MemberdialogForm.cardType === 'C'"
                >
                  <el-input
                    type="text"
                    v-model="MemberdialogForm.cardNo"
                    class="w-100 text-left"
                    placeholder="请输入次数"
                    :maxlength="100"
                  ></el-input
                ></el-form-item>
              </el-row>

              <el-row>
                <el-form-item
                  label="金额"
                  prop="moneyReal"
                  v-if="MemberdialogForm.cardType === 'C'"
                >
                  <el-input-number
                    v-model="MemberdialogForm.moneyReal"
                    :min="0"
                    :precision="2"
                    class="w-100 text-left"
                    placeholder="请输入金额"
                    :controls="false"
                  ></el-input-number
                ></el-form-item>
              </el-row>

              <el-row>
                <el-form-item
                  label="销售员工"
                  prop="salesEmployeeId"
                  v-if="MemberdialogForm.cardType === 'M'"
                >
                  <el-select
                    v-model="MemberdialogForm.salesEmployeeId"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                    :loading="storeUserLoading"
                  >
                    <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :label="item.nickname"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="备注" prop="adjustmentReason">
                  <el-input
                    v-model="MemberdialogForm.adjustmentReason"
                    type="textarea"
                    class="w-100 text-left"
                    placeholder="请输入备注"
                  ></el-input
                ></el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="handleCloseMember"
            >取 消</el-button
          >
          <el-button type="primary" @click="MemberdialogSubmit"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 办卡充值 -->
      <el-dialog
        :visible.sync="RechargedialogVisible"
        width="400px"
        title="办卡充值"
        class="no-dialog-padding"
        :before-close="handleClose"
      >
        <span>
          <div class="Create_recharge">
            <el-form
              ref="RechargeForm"
              :rules="RechargeRules"
              :model="RechargeForm"
            >
              <el-row>
                <el-col>
                  <el-form-item label="充值客户" prop="memberId">
                    <el-select
                      v-model="RechargeForm.memberId"
                      placeholder="请输入搜索查询充值客户"
                      class="w-100"
                      filterable
                      remote
                      reserve-keyword
                      :remote-method="remoteMethod"
                      :loading="loading"
                      @change="ChangeMember"
                    >
                      <el-option
                        v-for="item in ClientOptions"
                        :key="item.id"
                        :label="item.name + '-' + item.mobile"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="会员卡号" prop="cardNumber">
                    <el-input
                      class="w-100"
                      v-model="RechargeForm.cardNumber"
                      placeholder="请输入会员卡号"
                      maxlength="20"
                      :disabled="ishaveCardNumber"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="充值金额" prop="principal">
                    <el-input
                      class="w-100"
                      type="number"
                      @input="changeGetGiveMoney('b')"
                      v-model="RechargeForm.principal"
                      placeholder="请输入充值金额"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="give" v-loading="giveMoneyLoading">
                    赠送金额: {{ RechargeForm.giveMoney }}元
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-form-item label="额外赠送金额" prop="extraMoney">
                  <el-input-number
                    v-model="RechargeForm.extraMoney"
                    :min="1"
                    :max="10000"
                    :precision="2"
                    class="w-100 text-left"
                    placeholder="请输入赠送金额"
                    :controls="false"
                  ></el-input-number
                ></el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="充值方式" prop="payWay">
                  <el-select
                    v-model="RechargeForm.payWay"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                  >
                    <el-option
                      v-for="item in payWayOpention"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="销售员工" prop="salesEmployeeId">
                  <el-select
                    v-model="RechargeForm.salesEmployeeId"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                    :loading="storeUserLoading"
                  >
                    <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :label="item.nickname"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="handleClose">取 消</el-button>
          <el-button
            type="primary"
            @click="RechargeSubmit"
            :loading="CreateCardLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 余额调整 2023.03.07  暂时不用 -->
      <el-dialog
        :visible.sync="balancedialogVisible"
        width="400px"
        title="余额调整"
        :before-close="BalancehandleClose"
      >
        <span>
          <div>
            <el-form
              ref="balanceForm"
              :rules="balanceRules"
              :model="balanceForm"
            >
              <el-row>
                <el-col>
                  <div class="memberName">
                    调整会员卡：{{ balanceForm.cardName }}
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="调整本金金额" prop="adjPrincipal">
                    <el-input-number
                      v-model="balanceForm.adjPrincipal"
                      @change="handleChange"
                      :controls="false"
                      :min="0 - balanceForm.principal"
                      label="请输入调整金额"
                      class="w-100"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="give">
                    本金金额: {{ balanceForm.principal }}元
                  </div>
                </el-col>
              </el-row>

              <el-col>
                <el-form-item>
                  <el-input
                    class="w-100"
                    v-model="balanceForm.afterPrincipal"
                    placeholder="调整后本金金额"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="调整赠送金额" prop="adjGiveMoney">
                    <el-input-number
                      v-model="balanceForm.adjGiveMoney"
                      @change="handleChangeInput"
                      :controls="false"
                      :min="0 - balanceForm.giveMoney"
                      label="请输入调整金额"
                      class="w-100"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="give">
                    赠送金额: {{ balanceForm.giveMoney }}元
                  </div>
                </el-col>
              </el-row>

              <el-col>
                <el-form-item>
                  <el-input
                    class="w-100"
                    v-model="balanceForm.afterGiveMoney"
                    placeholder="调整后赠送金额"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-row>
                <el-form-item label="调整原因" prop="adjustmentReason">
                  <el-input
                    type="textarea"
                    placeholder="请输入调整原因"
                    v-model="balanceForm.adjustmentReason"
                    maxlength="30"
                    show-word-limit
                  />
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="BalancehandleClose"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="balanceSubmit"
            :loading="balanceLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 修改有效期 -->
      <el-dialog
        :visible.sync="expirationdialogVisible"
        width="400px"
        title="修改有效期"
        :before-close="UpdatehandleClose"
      >
        <span>
          <div>
            <el-form
              ref="expirationForm"
              :rules="expirationRules"
              :model="expirationForm"
            >
              <el-row class="el_row_item">
                <el-col>
                  <div class="memberName">
                    调整会员卡：{{ expirationForm.cardName }}
                  </div>
                </el-col>
              </el-row>
              <!-- <el-row class="el_row_date">
                  <el-col>
                    <el-form-item label="有效期" prop="inDateType">
                      <el-radio v-model="expirationForm.inDateType" label="1"
                        >永久有效</el-radio
                      >
                      <el-radio v-model="expirationForm.inDateType" label="2"
                        >指定日期</el-radio
                      >
                    </el-form-item>
                  </el-col>
                </el-row> -->
              <!-- v-if="expirationForm.inDateType === '2'" -->
              <el-row>
                <el-col>
                  <el-form-item label="指定日期" prop="inDate">
                    <el-date-picker
                      v-model="expirationForm.inDate"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="el_row_reason">
                <el-col>
                  <el-form-item label="修改原因" prop="remark">
                    <el-input
                      type="textarea"
                      placeholder="请输入修改原因"
                      v-model="expirationForm.remark"
                      maxlength="30"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="UpdatehandleClose"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="expirationSubmit"
            :loading="UpdateTimeLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 修改密码 -->
      <el-dialog
        :visible.sync="UpdatePsddialogVisible"
        width="400px"
        :title="title"
        class="no-dialog-padding"
        :before-close="UpdatePsdhandleClose"
      >
        <span>
          <div class="updatepsd">
            <el-form
              ref="UpdatePsdForm"
              :rules="UpdatePsdRules"
              :model="UpdatePsdForm"
            >
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="旧密码" prop="oldPassword">
                    <el-input
                      class="w-100"
                      type="password"
                      v-model="UpdatePsdForm.oldPassword"
                      placeholder="请输入旧密码"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="新密码" prop="newPassword">
                    <el-input
                      class="w-100"
                      type="password"
                      v-model="UpdatePsdForm.newPassword"
                      placeholder="请输入6位数密码"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="重复新密码" prop="ReaptnewPassword">
                    <el-input
                      class="w-100"
                      type="password"
                      v-model="UpdatePsdForm.ReaptnewPassword"
                      placeholder="请输入6位数密码"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="UpdatePsdhandleClose"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="UpdatePsdSubmit"
            :loading="UpdatePsdLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 修改余额 -->
      <el-dialog
        title="修改余额"
        :visible.sync="updatethaws"
        width="30%"
        :before-close="updatethawsClose"
      >
        <span>
          <div class="updatepsd">
            <el-form
              ref="updatethawsForm"
              :rules="updatethawsRules"
              :model="updatethawsForm"
            >
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="本金" prop="principal">
                    <el-input-number
                      class="w-100 text-left"
                      type="text"
                      v-model="updatethawsForm.principal"
                      :controls="false"
                      :precision="2"
                      :min="0"
                      placeholder="请输入本金"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="赠送金" prop="giveMoney">
                    <el-input-number
                      class="w-100 text-left"
                      type="text"
                      :min="0"
                      :precision="2"
                      v-model="updatethawsForm.giveMoney"
                      placeholder="请输入"
                      :controls="false"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="额外赠送金" prop="extraMoney">
                    <el-input-number
                      class="w-100 text-left"
                      type="text"
                      :min="0"
                      :precision="2"
                      v-model="updatethawsForm.extraMoney"
                      :controls="false"
                      placeholder="请输入"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="原因" prop="adjustmentReason">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="updatethawsForm.adjustmentReason"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatethawsClose">取 消</el-button>
          <el-button type="primary" @click="updatethawsSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 冲减 -->
      <el-dialog
        title="冲减"
        :visible.sync="offsettingOpen"
        width="30%"
        :before-close="offsettingClose"
      >
        <span>
          <div class="updatepsd">
            <el-form
              ref="offsettingFormRef"
              :rules="offsettingFormRules"
              :model="offsettingForm"
            >
              <el-row :gutter="10">
                <el-col>
                  <el-form-item
                    :label="'本金' + '(' + principal + ')'"
                    prop="principal"
                  >
                    <el-input-number
                      class="w-100 text-left"
                      type="text"
                      v-model="offsettingForm.principal"
                      :controls="false"
                      :precision="2"
                      placeholder="请输入本金"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item
                    :label="'赠送金' + '(' + giveMoney + ')'"
                    prop="giveMoney"
                  >
                    <el-input-number
                      class="w-100 text-left"
                      type="text"
                      :precision="2"
                      v-model="offsettingForm.giveMoney"
                      placeholder="请输入"
                      :controls="false"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item
                    :label="'额外赠送金' + '(' + extraMoney + ')'"
                    prop="extraMoney"
                  >
                    <el-input-number
                      class="w-100 text-left"
                      type="text"
                      :precision="2"
                      v-model="offsettingForm.extraMoney"
                      :controls="false"
                      placeholder="请输入"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="调整原因" prop="adjustmentReason">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="offsettingForm.adjustmentReason"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="offsettingClose">取 消</el-button>
          <el-button type="primary" @click="offsettingSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改卡号 -->
      <el-dialog
        title="修改卡号"
        :visible.sync="updateCard"
        width="30%"
        :before-close="updateCardClose"
      >
        <span>
          <div class="updatepsd">
            <el-form
              ref="updateCardForm"
              :rules="updateCardRules"
              :model="updateCardForm"
            >
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="会员卡名称" prop="cardName">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="updateCardForm.cardName"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="卡号" prop="cardNumber">
                    <el-input
                      class="w-100"
                      type="text"
                      v-model="updateCardForm.cardNumber"
                      placeholder="请输入卡号"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateCardClose">取 消</el-button>
          <el-button type="primary" @click="updateCardSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 退卡 -->
      <el-dialog
        :visible.sync="backCard"
        width="400px"
        title="退卡"
        class="no-dialog-padding"
        :before-close="BackCardClose"
      >
        <span>
          <div class="updatepsd">
            <el-form
              ref="backCardForm"
              :rules="backCardRules"
              :model="backCardForm"
            >
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="会员卡密码" prop="password">
                    <el-input
                      class="w-100 pwd"
                      type="text"
                      v-model="backCardForm.password"
                      placeholder="请输入旧密码"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="原因" prop="reason">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入原因"
                      v-model="backCardForm.reason"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="BackCardClose">取 消</el-button>
          <el-button
            type="primary"
            @click="BackCardSubmit"
            :loading="UpdatePsdLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  CreateClient,
  addMemberUsertemp,
  getClientInfo,
  getClientfundInfo,
  getClientSourceList,
  CreateCard,
  getMemberAccountPage,
  FreezeCard,
  getMemberCard,
  getClient,
  updatePassword,
  resetPassword,
  adjustment,
  ConsumptionRecords,
  updateThaw,
  CreateProjectCard,
  getMemberCards,
  TransferPage,
  BackCard,
  updateThawMoney,
  cardNumbers,
  adjustMemberCard,
  backCardFallback,
  CardoffsettingApi,
} from "@/api/business/client";
import { itemAllList } from "@/api/business/BusinessIndex";
import { phoneTest, checkDecimalNumber } from "@/utils/regular";
import { capitalAmount } from "@/utils/utils";
import { mapGetters } from "vuex";

export default {
  name: "EryuoaStoreFrontendClientlist",

  data() {
    return {
      principal: "",
      giveMoney: "",
      extraMoney: "",
      offsettingOpen: false, // 冲减
      offsettingForm: {
        adjustmentReason: "", // 调整原因
        extraMoney: "", // 额外赠送金
        giveMoney: "", // 赠送金
        id: "", // 会员卡id
        principal: "", // 本金
      },

      offsettingFormRules: {
        principal: [{ required: true, message: "请输入本金", trigger: "blur" }],
        giveMoney: [
          { required: true, message: "请输入赠送金", trigger: "blur" },
        ],
        extraMoney: [
          { required: true, message: "请输入额外赠送金请", trigger: "blur" },
        ],
        adjustmentReason: [
          { required: true, message: "请输入调整原因", trigger: "blur" },
        ],
      },

      updateCard: false,
      updateCardForm: {
        cardNumber: "",
      },
      updateCardRules: {
        cardNumber: [
          { required: true, message: "请输入会员卡号", trigger: "blur" },
        ],
      },

      updatethaws: false, //修改余额
      updatethawsForm: {
        principal: "",
        giveMoney: "",
        extraMoney: "",
        adjustmentReason: "",
      },
      updatethawsRules: {
        principal: [{ required: true, message: "请输入本金", trigger: "blur" }],
        giveMoney: [
          { required: true, message: "请输入赠送金", trigger: "blur" },
        ],
        extraMoney: [
          { required: true, message: "请输入额外赠送金", trigger: "blur" },
        ],
        // adjustmentReason: [
        //   { required: true, message: "请输入调整原因", trigger: "blur" },
        // ],
      },

      backCard: false,
      backCardForm: {
        cardId: "",
        password: "",
        reason: "",
      },
      backCardRules: {
        password: [
          { required: true, message: "请输入会员卡密码", trigger: "blur" },
        ],
        reason: [
          { required: true, message: "请输入会员卡密码", trigger: "blur" },
        ],
      },
      TransferList: [], // 转账记录列表
      TransferParams: {
        memberId: "",
        pageNo: 1,
        pageSize: 10,
      },
      AllProjectList: [], // 所有项目列表
      queryType: "",
      newClientdialogVisible: false,
      ishaveCardNumber: false, // 是否有卡
      RechargedialogVisible: false, // 办卡充值
      CreateCardLoading: false,
      UpdateTimeLoading: false,
      MemberInfodialogVisible: false, // 客户信息
      MemberdialogVisible: false, // 会员充值
      balancedialogVisible: false, // 余额调整
      balanceLoading: false,
      UpdatePsddialogVisible: false, // 修改密码
      UpdatePsdLoading: false,
      expirationdialogVisible: false, // 修改有效期
      loading: false,
      activeIndex: 1,
      textarea: "",
      value1: "",
      ClientList: [], // 客户列表数据
      UserBasicInfo: {}, // 客户基本信息
      UserBasicFundInfo: {}, // 客户资金总额信息

      options: [],
      ClientSourceData: [], // 客户来源数据
      WalletDetailList: [], // 储值交易记录
      ClientOptions: [], // 客户列表
      storeUserLoading: false,
      userList: [], // 用户
      MemberCardList: [], // 会员卡列表

      ConsumptionData: [], // 消费记录

      isHaveCard: false, // false 不存在卡 true 存在卡

      // 客户类型
      customerTypeObj: {
        1: "散客",
        2: "会员",
      },

      ClientType: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "散客",
        },
        {
          value: 2,
          label: "会员",
        },
      ],

      typeObj: {
        1: "充值",
        2: "消费",
        3: "钱包",
        4: "调整",
      },

      newClientRules: {
        name: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号" },
          {
            validator: this.checkPhone,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入6位数消费密码", trigger: "blur" },
          { min: 6, max: 6, message: "请输入6位数消费密码", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        sourceId: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },

      MemberdialogRules: {
        principal: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
          {
            validator: this.checkNumber,
            trigger: "change",
          },
        ],
        salesEmployeeId: [
          { required: true, message: "请选择销售员工", trigger: "blur" },
        ],

        itemId: [{ required: true, message: "请选择项目", trigger: "blur" }],

        itemCount: [{ required: true, message: "请输入数量", trigger: "blur" }],

        cardNo: [{ required: true, message: "请输入卷码", trigger: "blur" }],

        moneyReal: [{ required: true, message: "请输入金额", trigger: "blur" }],

        payWay: [
          { required: true, message: "请选择充值方式", trigger: "blur" },
        ],
      },

      RechargeRules: {
        cardNumber: [
          { required: true, message: "请输入会员卡号", trigger: "change" },
        ],
        memberId: [
          { required: true, message: "请选择充值客户", trigger: "change" },
        ],
        principal: [
          { required: true, message: "请输入充值金额", trigger: "change" },
          {
            validator: this.checkNumber,
            trigger: "change",
          },
        ],

        // extraMoney: [
        //   { required: true, message: "请输入赠送金额", trigger: "change" },
        // ],

        payWay: [
          { required: true, message: "请选择充值方式", trigger: "change" },
        ],
        salesEmployeeId: [
          { required: true, message: "请选择销售员工", trigger: "change" },
        ],
      },

      balanceRules: {
        adjPrincipal: [
          { required: true, message: "请输入调整金额", trigger: "blur" },
        ],
        adjGiveMoney: [
          { required: true, message: "请输入调整金额", trigger: "blur" },
        ],
        adjustmentReason: [
          { required: true, message: "请输入调整原因", trigger: "blur" },
        ],
      },

      UpdatePsdRules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        ReaptnewPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],
      },

      expirationRules: {
        inDateType: [
          { required: true, message: "请选择有效期", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入修改原因", trigger: "blur" },
        ],
        inDate: [
          { required: true, message: "请选择指定日期", trigger: "blur" },
        ],
      },

      newClientForm: {
        name: "",
        mobile: "",
        mobile2: "",
        password: "",
        sex: "",
        birthday: "",
        referrer: "",
        sourceId: "",
        storeId: "",
        createTime: "",
        principal: "",
        giveMoney: "",
        extraMoney: "",
      },

      newClientLoading: false,
      newClientCardLoading: false,
      balanceForm: {
        id: "", // 会员卡id
        adjPrincipal: "", // 调整本金金额
        adjGiveMoney: "", // 调整赠送金金额
        adjustmentReason: "", // 调整原因
      },

      giveMoneyLoading: false,

      // 会员充值
      MemberdialogForm: {
        Money: "",
        giveMoney: 0, // 赠送金
        memberId: "", // 会员/客户id
        principal: "", // 本金
        salesEmployeeId: "", // 销售员工ID
        payWay: "",
        cardNumber: "", // 会员卡号
        extraMoney: undefined,
        cardNo: "",
        itemCount: "",
        itemId: "",
        memberId: "",
        moneyReal: "",
        cardType: "",
        adjustmentReason: "",
      },

      // 办卡充值
      RechargeForm: {
        deptId: "", // 充卡门店id
        giveMoney: 0, //赠送金
        memberId: "", // 会员/客户id
        principal: "", // 本金
        salesEmployeeId: "", // 销售员工ID
        cardName: "",
        payWay: "",
        cardNumber: "", // 会员卡号
        // MemberCards: '', // 根据客户标识查询本门店会员卡号
        extraMoney: undefined,
      },

      useStoreParams: {
        pageNo: 1,
        pageSize: 10,
        keyword: "",
      },

      // 修改密码
      UpdatePsdForm: {
        id: "",
        oldPassword: "",
        newPassword: "",
        ReaptnewPassword: "", // 重复新密码
      },

      // 修改有效期
      expirationForm: {
        id: "",
        inDate: "",
        inDateType: "1",
      },

      value: "",
      // 查询参数
      queryParams: {
        customerType: null, // 客户类型 1普通账户，即散客 2会员卡账户，即会员.
        // mobile: "", // 手机号
        sourceId: "", // 客户来源
        pageNo: 1,
        pageSize: 10,
        userName: "",
        keyword: "",
      },
      queryParams1: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {
        pageNo: 1,
        pageSize: 10,
        custId: "",
      },
      queryParams2: {
        pageNo: 1,
        pageSize: 10,
        customerId: "",
      },

      // 性别
      Sexoptions: [
        {
          value: 0,
          label: "未知",
        },
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      total: 0,
      total1: 0,
      total2: 0,
      totals: 0,
      title: "",

      seachTimeout: null,

      payWayOpention: [
        {
          label: "微信",
          value: 1,
        },
        {
          label: "支付宝",
          value: 2,
        },
        {
          label: "银行卡",
          value: 3,
        },
        {
          label: "现金",
          value: 4,
        },
      ],

      // 会员卡类型
      cardTypeOption: [
        {
          value: "M",
          label: "储值卡",
        },
        {
          value: "C",
          label: "计次卡",
        },
      ],

      seachUserClientTimeout: false,
    };
  },

  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.getClientSource();
    this.itemAllLists();
  },

  mounted() {
    document.addEventListener("paste", function (e) {
      if (e.target.offsetParent.classList.contains("pwd")) {
        e.preventDefault();
      }
    });
  },

  methods: {
    back(row) {
      this.$confirm("确认要回退吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          backCardFallback({
            id: row.id,
          })
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.BackCardClose();
                this.getMembers();
                this.getUserFundInfo();
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
    CheckOrder(row) {
      this.$router.push({
        path: "/storeAdminfinance/storeAdminorderDetail",
        query: { orderId: row.orderId },
      });
    },

    // 确定退卡
    BackCardSubmit() {
      this.$refs["backCardForm"].validate((valid) => {
        if (valid) {
          BackCard(this.backCardForm)
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.BackCardClose();
                this.getMembers();
                this.getUserFundInfo();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    BackCardClose() {
      this.backCard = false;
      this.$nextTick(() => {
        this.backCardForm.password = "";
        this.backCardForm.reason = "";
      });
    },
    TransferPages() {
      TransferPage({
        pageNo: 1,
        pageSize: 10,
        memberId: this.UserBasicInfo.id,
        queryType: "A",
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.TransferList = data.list;
            this.totals = data.total;
          }
        })
        .catch((err) => {});
    },

    // 根据客户标识查询本门店会员卡号
    ChangeMember() {
      this.ChangeMemberCards(this.RechargeForm.memberId);
    },
    ChangeMemberCards(id) {
      getMemberCards({ id }).then((res) => {
        const { code, data } = res;
        if (code === 0) {
          if (!!data) {
            this.RechargeForm.cardNumber = data;
            this.ishaveCardNumber = true;
          } else {
            this.RechargeForm.cardNumber = "";
            this.ishaveCardNumber = false;
          }
        }
      });
    },

    checkNumber(rule, value, callback) {
      if (Number(value) < 0 && !!value) {
        callback(new Error("请不要输入负数"));
      }
      if (!checkDecimalNumber(value) && !!value) {
        callback(new Error("注意格式最多保留两位小数"));
      } else {
        callback();
      }
    },

    changeGetGiveMoney(type) {
      if (type === "a") {
        this.handleChangeMember();
      }

      clearTimeout(this.seachTimeout);
      this.seachTimeout = setTimeout(() => {
        this.RechargeForm.giveMoney = 0;
        this.MemberdialogForm.giveMoney = 0;

        let principal;

        if (type === "a") {
          principal = this.MemberdialogForm.principal;
        } else if (type === "b") {
          principal = this.RechargeForm.principal;
        }

        if (!principal) {
          return false;
        }
        // this.getGiveMoneyData(type, principal);
      }, 500);
    },

    // getGiveMoneyData(type, principal) {
    //   this.giveMoneyLoading = true;

    //   getGiveMoney({
    //     principal: principal,
    //   })
    //     .then((res) => {
    //       this.giveMoneyLoading = false;
    //       const { code, data } = res;
    //       if (code === 0) {
    //         if (type === "a" && principal === this.MemberdialogForm.principal) {
    //           this.MemberdialogForm.giveMoney = data;
    //           this.handleChangeMember();
    //         } else if (
    //           type === "b" &&
    //           principal === this.RechargeForm.principal
    //         ) {
    //           this.RechargeForm.giveMoney = data;
    //         }
    //       }
    //     })
    //     .catch((err) => {
    //       this.giveMoneyLoading = false;
    //     });
    // },

    // getUser() {
    //   this.storeUserLoading = true;
    //   getStoreUser({ filterUser: "N" })
    //     .then((res) => {
    //       console.log(res);
    //       this.storeUserLoading = false;
    //       const { code, data } = res;
    //       if (code === 0) {
    //         this.userList = data;
    //       }
    //     })
    //     .catch((err) => {
    //       this.storeUserLoading = false;
    //     });
    // },

    GetClientList(query) {
      getClient({
        keyword: query,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.ClientOptions = data.list;
          }
        })
        .catch((err) => {});
    },

    /** 复制代码成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },

    checkPhone(rule, value, callback) {
      if (!phoneTest(value) && !!value) {
        callback(new Error("请输入正确手机号格式"));
      } else {
        callback();
      }
    },

    remoteMethod(query) {
      if (query !== "") {
        clearTimeout(this.seachUserClientTimeout);
        this.seachUserClientTimeout = setTimeout(() => {
          this.GetClientList(query);
        }, 500);
      } else {
        this.options = [];
      }
    },

    // 确认 修改密码
    UpdatePsdSubmit() {
      this.$refs["UpdatePsdForm"].validate((valid) => {
        if (valid) {
          this.Updatepassword();
        }
      });
    },

    // 修改密码
    Updatepassword() {
      if (this.UpdatePsdLoading) {
        return false;
      }
      this.UpdatePsdForm.id = this.UserBasicInfo.id;
      if (
        this.UpdatePsdForm.newPassword === this.UpdatePsdForm.ReaptnewPassword
      ) {
        this.UpdatePsdLoading = true;
        updatePassword(this.UpdatePsdForm)
          .then((res) => {
            this.UpdatePsdLoading = false;
            const { code } = res;
            if (code === 0) {
              this.$modal.msgSuccess("修改成功");
              this.UpdatePsdhandleClose();
            }
          })
          .catch((err) => {
            this.UpdatePsdLoading = false;
          });
      } else {
        this.$modal.msgError("两次密码不一致！");
      }
    },

    UpdatePsdhandleClose() {
      this.resetFormData("UpdatePsdForm");
      this.$nextTick(() => {
        this.UpdatePsddialogVisible = false;
        this.UpdatePsdLoading = false;
      });
    },

    // 开卡 办户
    OpenCard(row) {
      this.MemberdialogForm.cardType = "";
      this.MemberdialogForm.cardNumber = "";
      this.MemberdialogForm.memberId = row.id;
      this.MemberdialogVisible = true;
      this.MemberdialogForm.isNew = true;
      this.MemberdialogForm.isAdd = true;
      // this.getUser();
      if (!!this.MemberdialogForm.memberId) {
        getMemberCards({ id: this.MemberdialogForm.memberId }).then((res) => {
          const { code, data } = res;
          if (code === 0) {
            if (!!data) {
              this.MemberdialogForm.cardNumber = data;
              this.MemberdialogForm.isNew = false;
            } else {
              this.MemberdialogForm.cardNumber = "";
              this.MemberdialogForm.isNew = true;
            }
          }
        });
      }
    },

    handleCloseMember() {
      this.CreateCardLoading = false;
      this.resetFormData("MemberdialogForm");
      this.$nextTick(() => {
        this.MemberdialogVisible = false;
        // this.MemberdialogVisible.itemId = '';
        // this.MemberdialogVisible.itemCount = '';
        // this.MemberdialogVisible.cardNo = '';
        // this.MemberdialogVisible.moneyReal = '';
      });
    },

    // 确认充值
    MemberdialogSubmit() {
      this.$refs["MemberdialogForm"].validate((valid) => {
        if (valid) {
          if (this.CreateCardLoading) {
            return false;
          }

          if (this.MemberdialogForm.cardType === "M") {
            this.CreateCardLoading = true;
            let MemberdialogForm = JSON.parse(
              JSON.stringify(this.MemberdialogForm)
            );

            const { storesItem } = this.userInfo;

            MemberdialogForm.deptId = storesItem.id;
            MemberdialogForm.cardName = storesItem.name;

            // MemberdialogForm.memberId = this.UserBasicInfo.id;

            delete MemberdialogForm.Money;

            CreateCard(MemberdialogForm)
              .then((res) => {
                this.CreateCardLoading = false;
                const { code } = res;
                if (code === 0) {
                  this.getMembers();
                  this.handleCloseMember();
                  this.getUserFundInfo();
                  // this.MemberUserInfo({ id: MemberdialogForm.memberId });
                  this.onUpdata();
                }
              })
              .catch((err) => {
                this.CreateCardLoading = false;
              });
          } else if (this.MemberdialogForm.cardType === "C") {
            this.itemAllLists();
            this.CreateProjectCards();
          }
        }
      });
    },

    // 获得门店所有项目列表
    itemAllLists() {
      itemAllList()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.AllProjectList = data;
          }
        })
        .catch((err) => {});
    },

    // 计次卡
    CreateProjectCards() {
      const { cardNo, itemCount, itemId, memberId, moneyReal } =
        this.MemberdialogForm;
      CreateProjectCard({
        cardNo: cardNo,
        itemCount: itemCount,
        itemId: itemId,
        memberId: memberId,
        moneyReal: moneyReal,
      })
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getMembers();
            this.handleCloseMember();
            this.getUserFundInfo();
            this.newClientdialogVisible = false;
            this.getPayClient();
            this.onUpdata();
          }
        })
        .catch((err) => {});
    },

    // 充值
    Recharge(item) {
      this.MemberdialogVisible = true;
      this.MemberdialogForm.cardType = item.cardType;
      this.itemAllLists();
      this.MemberdialogForm.memberId = this.UserBasicInfo.id;
      this.MemberdialogForm.cardNumber = item.cardNumber;
      // this.MemberdialogForm.cardType = item.cardType;
      this.MemberdialogForm.isNew = false;
      this.MemberdialogForm.isAdd = false;
      // this.getUser();
      this.ChangeMemberCards(this.UserBasicInfo.id);
    },

    // 会员充值 加数器
    handleChangeMember() {
      const { principal, giveMoney } = this.MemberdialogForm;

      let money = (
        Number(!!principal ? principal : 0) +
        Number(!!giveMoney ? giveMoney : 0)
      ).toFixed(2);

      this.MemberdialogForm.Money = capitalAmount(money);
    },

    // 取消 调整
    CancelbalanceSubmit() {
      this.balancedialogVisible = false;
    },

    // 调整 确认
    balanceSubmit() {
      this.$refs["balanceForm"].validate((valid) => {
        this.balancedialogVisible = false;
        if (this.balanceLoading) {
          return false;
        }
        this.balanceLoading = true;
        adjustment(this.balanceForm)
          .then((res) => {
            this.balanceLoading = false;
            const { code } = res;
            if (code === 0) {
              this.BalancehandleClose();
            }
          })
          .catch((err) => {
            this.balanceLoading = false;
          });
      });
    },

    // 调整
    Adjust(item) {
      this.balanceForm.id = item.id;
      this.balanceForm.cardName = item.cardName;
      this.balancedialogVisible = true;
      console.log(item);
      // this.balanceForm.principal = 1000; // 本金金额
      // this.balanceForm.adjPrincipal = 0; // 调整本金金额
      // this.balanceForm.afterPrincipal = 1000; // 调整后的
      // this.balanceForm.giveMoney = 200; // 赠送金额
      // this.balanceForm.adjGiveMoney = 0;
      // this.balanceForm.afterGiveMoney = 200; // 调整后的赠送金额
    },

    BalancehandleClose() {
      this.resetFormData("balanceForm");
      this.$nextTick(() => {
        this.balancedialogVisible = false;
        this.balanceLoading = false;
      });
    },

    handleCommand(command, item) {
      console.log(command, item);
      if (command === "c") {
        this.freeze(item);
      } else if (command === "d") {
        // this.Adjust(item);
        this.BackCards(item); // 退卡
        this.backCardForm.cardId = item.id;
      } else if (command === "x") {
        this.updateThaw(item);
      } else if (command === "l") {
        this.adjustMember(item);
      } else if (command === "y") {
        this.updateCards(item);
      } else if (command === "j") {
        this.Offsetting(item);
      }
    },

    // 修改卡号
    updateCards(item) {
      this.updateCard = true;
      this.updateCardForm.cardId = item.id;
      this.updateCardForm.cardName = item.cardName;
      this.updateCardForm.cardNumber = item.cardNumber;
    },
    updateCardClose() {
      this.updateCard = false;
      this.resetFormData("updateCardForm");
      this.updateCardForm.cardId = "";
    },
    updateCardSubmit() {
      this.$refs["updateCardForm"].validate((valid) => {
        if (valid) {
          cardNumbers({
            cardId: this.updateCardForm.cardId,
            cardNumber: this.updateCardForm.cardNumber,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getUserFundInfo();
                this.getMembers();
                this.updateCardClose();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 修改余额
    adjustMember(item) {
      this.updatethaws = true;
      this.updatethawsForm.principal = item.principal;
      this.updatethawsForm.giveMoney = item.giveMoney;
      this.updatethawsForm.extraMoney = item.extraMoney;
      this.updatethawsForm.id = item.id;
    },
    updatethawsClose() {
      this.updatethaws = false;
      this.resetFormData("updatethawsForm");
      this.updatethawsForm.id = "";
    },
    updatethawsSubmit() {
      this.$refs["updatethawsForm"].validate((valid) => {
        if (valid) {
          adjustMemberCard({
            principal: this.updatethawsForm.principal,
            giveMoney: this.updatethawsForm.giveMoney,
            extraMoney: this.updatethawsForm.extraMoney,
            adjustmentReason: this.updatethawsForm.adjustmentReason,
            id: this.updatethawsForm.id,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getUserFundInfo();
                this.getMembers();
                this.updatethawsClose();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 冲减
    Offsetting(item) {
      // console.log(1119);
      this.offsettingOpen = true;
      this.principal = item.principal;
      this.giveMoney = item.giveMoney;
      this.extraMoney = item.extraMoney;
      this.offsettingForm.id = item.id;
    },

    offsettingClose() {
      this.resetFormData("offsettingFormRef");
      this.offsettingForm.id = "";
      this.offsettingForm.principal = "";
      this.offsettingForm.giveMoney = "";
      this.offsettingForm.extraMoney = "";
      this.offsettingForm.adjustmentReason = "";

      this.principal = 0;
      this.giveMoney = 0;
      this.extraMoney = 0;

      this.$nextTick(() => {
        this.offsettingOpen = false;
      });
    },
    offsettingSubmit() {
      this.$refs["offsettingFormRef"].validate((valid) => {
        if (valid) {
          CardoffsettingApi(this.offsettingForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getUserFundInfo();
                this.getMembers();
                this.offsettingClose();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 解冻余额
    updateThaw(item) {
      this.$confirm("确认解冻余额吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateThawMoney({
            id: item.id,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getUserFundInfo();
                this.getMembers();
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解冻",
          });
        });
    },

    // 退卡
    BackCards(items) {
      // console.log("ssssasas", items);
      this.backCard = true;
    },

    handleChange() {
      this.balanceForm.afterPrincipal = (
        this.balanceForm.principal + this.balanceForm.adjPrincipal
      ).toFixed(2);
    },

    handleChangeInput() {
      this.balanceForm.afterGiveMoney = (
        this.balanceForm.giveMoney + this.balanceForm.adjGiveMoney
      ).toFixed(2);
    },

    // 修改有效期
    ExpirationDate(item) {
      this.expirationdialogVisible = true;
      let id = item.id;
      this.expirationForm.id = id;
      this.expirationForm.cardName = item.cardName;
      this.expirationForm.deptId = item.deptId;
      this.expirationForm.memberId = item.memberId;
    },

    onUpdata() {
      // console.log("lxy");
      this.$emit("change");
    },

    // 确认 修改有效期
    expirationSubmit() {
      this.$refs["expirationForm"].validate((valid) => {
        if (valid) {
          if (this.UpdateTimeLoading) {
            return false;
          }
          this.UpdateTimeLoading = true;
          const { id, inDate, remark, deptId, memberId, cardName } =
            this.expirationForm;
          CreateCard({
            id: id,
            inDate: !!inDate ? inDate + " 23:59:59" : "",
            remark: remark,
            deptId: deptId,
            memberId: memberId,
            cardName: cardName,
          })
            .then((res) => {
              this.UpdateTimeLoading = false;
              const { code } = res;
              if (code === 0) {
                this.UpdatehandleClose();
              }
            })
            .catch((err) => {
              this.UpdateTimeLoading = false;
            });
        }
      });
    },

    UpdatehandleClose() {
      this.resetFormData("expirationForm");
      this.$nextTick(() => {
        this.expirationdialogVisible = false;
      });
    },

    // 冻结
    freeze(item) {
      this.$confirm("会员卡冻结后将无法使用, 是否冻结?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          FreezeCard({ id: item.id })
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.getMembers();
                this.getUserFundInfo(this.UserBasicInfo.id);
                this.$message({
                  type: "success",
                  message: "冻结成功!",
                });
                this.CutTab(1);
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    // 解冻
    thawCard(row) {
      this.$confirm("是否确定解冻会员卡?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateThaw({ cardId: row.id })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getMembers();
                this.getUserFundInfo(this.UserBasicInfo.id);
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    // 重置密码
    revise() {
      this.$confirm("密码重置后将无法撤回, 是否重置密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPassword({ id: this.UserBasicInfo.id })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    UpdatePsd() {
      this.UpdatePsddialogVisible = true;
      this.title = "修改密码";
    },

    // 打开修改密码弹框 修改密码
    UpdatePassword() {
      this.UpdatePsddialogVisible = true;
    },

    // tab切换
    CutTab(i) {
      this.activeIndex = i;
      // this.isHaveCard = false;
      // this.MemberCardList = [];
      if (i === 3) {
        this.getWalletDetails();
      } else if (i === 1) {
        this.getMembers();
      } else if (i === 2) {
        this.ConsumptionList();
      } else if (i === 4) {
        this.TransferPages();
      }
    },

    // 会员卡列表
    getMembers() {
      getMemberCard({
        customerId: this.UserBasicInfo.id || this.MemberdialogForm.memberId,
        queryType: "A",
      })
        .then((res) => {
          console.log(res, "shuju");

          const { code, data } = res;
          if (code === 0) {
            let NewArry = [];
            if (data.length > 0) {
              const { storesItem } = this.userInfo;

              for (let i = 0; i < data.length; i++) {
                let Item = data[i];
                // if (Item.storeId === storesItem.id) {
                this.isHaveCard = true;
                Item.haveCard = true;
                // }

                NewArry.push(Item);
              }
            }
            console.log(NewArry);
            this.MemberCardList = NewArry;
          }
        })
        .catch((err) => {});
    },

    //消费记录
    ConsumptionList() {
      this.queryParams1.custId = this.UserBasicInfo.id;
      this.queryParams1.queryType = "A";
      ConsumptionRecords(this.queryParams1)
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.ConsumptionData = data.list;
            this.total1 = data.total;
          }
        })
        .catch((err) => {});
    },

    // 储值交易记录
    getWalletDetails() {
      let queryParams2 = JSON.parse(JSON.stringify(this.queryParams2));
      queryParams2.customerId = this.UserBasicInfo.id;
      queryParams2.queryType = "A";
      getMemberAccountPage(queryParams2)
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.WalletDetailList = data.list;
            this.total2 = data.total;
          }
        })
        .catch((err) => {});
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.onUpdata();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    MemberUserInfo(row, queryType) {
      this.UserBasicInfo = JSON.parse(JSON.stringify(row));
      this.queryType = queryType;
      this.activeIndex = 1;
      let id = row.id;
      this.MemberInfodialogVisible = true;

      this.getUserBasicInfo(id);
      this.getUserFundInfo(id);
      this.getMembers();
    },

    // 客户详情基础信息
    getUserBasicInfo(id) {
      getClientInfo({ id: id }).then((res) => {
        const { code, data } = res;
        if (code === 0) {
          this.UserBasicInfo = data;
        }
      });
    },

    // 获取客户资金总额信息
    getUserFundInfo(id) {
      getClientfundInfo({
        customerId: this.UserBasicInfo.id || this.MemberdialogForm.memberId,
        queryType: "A",
      }).then((res) => {
        const { code, data } = res;
        if (code === 0) {
          this.UserBasicFundInfo = data;
          this.CutTab(1);
        }
      });
    },

    NewmemberUser() {
      this.newClientdialogVisible = true;

      this.$nextTick(() => {
        this.newClientForm = {
          name: "",
          mobile: "",
          mobile2: "",
          password: "",
          sex: "",
          birthday: "",
          referrer: "",
          sourceId: "",
        };
      });

      this.getClientSource();
      // this.getUser();
    },

    getClientSource() {
      getClientSourceList().then((res) => {
        const { code, data } = res;
        if (code === 0) {
          this.ClientSourceData = data;
        }
      });
    },

    // 办卡充值
    RechargeCard() {
      this.RechargedialogVisible = true;
      this.RechargeForm.cardNumber = "";
      // this.getUser();
    },

    // 新增客户 弹框 确认
    ClientSubmit(type) {
      if (this.newClientLoading || this.newClientCardLoading) {
        return false;
      }

      this.$refs["newClientForm"].validate((valid) => {
        if (valid) {
          this.NewClient(type);
        } else {
        }
      });
    },

    NewClient(type) {
      if (type === 0) {
        this.newClientLoading = true;
      } else if (type === 1) {
        this.newClientCardLoading = true;
      }

      addMemberUsertemp({
        ...this.newClientForm,
      })
        .then((res) => {
          this.newClientLoading = false;
          this.newClientCardLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.onUpdata();
            this.$emit("childEvent");
            this.CancelClientSubmit();
            // if (data.memberState === 0) {
            //   this.addClientTip(type, data);
            //   console.log("ljdjsdl");

            // } else if (data.memberState === 1 && type === 1) {
            //   this.CancelClientSubmit();
            //   this.OpenCard(data);
            // } else {
            //   this.CancelClientSubmit();
            // }
          }
        })
        .catch(() => {
          this.newClientLoading = false;
          this.newClientCardLoading = false;
        });
    },

    addClientTip(type, data) {
      this.$confirm("客户已被录入是否转入客户详情?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          this.CancelClientSubmit();
          this.MemberUserInfo({
            id: data.id,
          });
        })
        .catch(() => {
          this.CancelClientSubmit();
        });
    },

    // 取消 弹框 关闭
    CancelClientSubmit() {
      this.resetForm("newClientForm");
      this.newClientLoading = false;
      this.newClientCardLoading = false;
      this.$nextTick(() => {
        this.newClientdialogVisible = false;
      });
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleClose() {
      this.resetFormData("RechargeForm");
      this.giveMoneyLoading = false;
      this.$nextTick(() => {
        this.RechargedialogVisible = false;
      });
    },

    // 用户信息
    handleCloseUserInfo() {
      this.isHaveCard = false;
      this.MemberCardList = [];
      this.queryParams1.pageNo = 1;
      this.queryParams2.pageNo = 1;
      this.ConsumptionData = [];
      this.WalletDetailList = [];
      this.total1 = 0;
      this.total2 = 0;
      this.giveMoneyLoading = false;
      this.$nextTick(() => {
        this.MemberInfodialogVisible = false;
      });
    },

    // 办卡充值 确定
    RechargeSubmit() {
      this.$refs["RechargeForm"].validate((valid) => {
        if (valid) {
          if (this.CreateCardLoading) {
            return false;
          }
          this.CreateCardLoading = true;
          let RechargeForm = JSON.parse(JSON.stringify(this.RechargeForm));

          const { storesItem } = this.userInfo;

          RechargeForm.deptId = storesItem.id;
          RechargeForm.cardName = storesItem.name;

          CreateCard(RechargeForm)
            .then((res) => {
              this.CreateCardLoading = false;
              const { code } = res;
              if (code === 0) {
                this.handleClose();
                this.onUpdata();
              }
            })
            .catch((err) => {
              this.CreateCardLoading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.memberInfo_box {
  width: 100%;
  display: inline-block;
  .left_box {
    width: 20%;
    float: left;
    position: relative;
    border-right: 1px solid #f4f4f4;
    .member_img {
      width: 110px;
      height: 110px;
      margin: 40px auto;
      margin-bottom: 20px;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .memeber_logotype {
        width: 70px;
        height: 20px;
        background-color: #e3ffe5;
        color: #18b91e;
        border: 1px solid #e3ffe5;
        text-align: center;
        line-height: 20px;
        border-radius: 2px;
        position: absolute;
        top: 137px;
        right: 97px;
      }
    }
    .member_username {
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
    .desc_content {
      text-align: center;
      margin-top: 30px;
      padding: 0px 24px;
      padding-bottom: 30px;
      .copy {
        display: flex;
        margin-left: 50px;
        .title_Desc {
          color: #333333;
        }
        img {
          width: 16px;
          height: 16px;
          margin-top: 2px;
          margin-left: 4px;
        }
      }
      .div1 {
        margin-top: 20px;
        color: #9d9d9d;
        .title_Desc {
          color: #333333;
        }
      }
    }
  }
  .right_box {
    width: 80%;
    height: 500px;
    float: left;
    .balc_box {
      display: flex;
      .balance_left {
        width: 134px;
        height: 153px;
        display: flex;
        flex-direction: column;
        background: rgba(0, 82, 217, 0.05);
        border-radius: 8px;
        margin-left: 11px;
        margin-top: 24px;
        margin-right: 12px;
        font-size: 16px;
        font-weight: 400;
        color: #0052d9;
        text-align: center;
        padding: 0 7px;
        div {
          height: 76px;
          line-height: 76px;
          text-align: center;
        }
        .updatePwd {
          cursor: pointer;
        }
        .repeatPsd {
          height: 1px;
          background: rgba(0, 0, 0, 0.1);
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 1px;
          cursor: pointer;
        }
      }
      .balance_nav {
        width: 100%;
        height: 153px;
        background: rgba(0, 82, 217, 0.05);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 24px;
        margin-left: 0px;
        .balance_nav_list {
          padding: 0 28px;
          .balance {
            font-size: 24px;
            font-weight: 500;
            color: #0052d9;
          }

          .balance_desc {
            font-size: 14px;
            font-weight: 500;
            color: rgba(0, 82, 217, 0.5);
          }

          //   .wallet {
          //     font-size: 14px;
          //     font-weight: 500;
          //     color: rgba(0, 82, 217, 0.5);
          //     vertical-align: middle;
          //   }
        }
      }
    }

    .balance_operate {
      .cut_nav_box {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #e9e9e9;

        .btn-box_small {
          width: 100px;
          height: 48px;
          line-height: 48px;
          background: #ffffff;
          text-align: center;
          cursor: pointer;
          border: none;
          color: rgba(0, 0, 0, 0.6);
          font-size: 14px;
          font-weight: 400;
          &.active {
            color: #0052d9;
            border-bottom: 1px solid #0052d9;
          }
        }
      }

      .member_info_content {
        border-radius: 4px;
        margin: 24px;
        .content_box {
          // background: #ffffff;
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
          border-radius: 4px;
          margin-bottom: 30px;

          .style1 {
            display: flex;
            height: 160px;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: 400;
            color: #0052d9;
            img {
              width: 48px;
              height: 48px;
              display: block;
              margin: 0 auto;
            }
          }

          .style2 {
            height: 160px;
            position: relative;
            .ey_top {
              min-width: 120px;
              padding: 0 7px;
              height: 32px;
              line-height: 32px;
              background: #0052d9;
              border-radius: 3px 0px 8px 0px;
              color: #ffffff;
              text-align: center;
              font-size: 12px;
              font-weight: 400;
              position: absolute;
              top: 0px;
              left: 0px;
              &.dis {
                background-color: #e4e4e4;
              }
            }

            .cardNumber {
              position: absolute;
              right: 24px;
              top: 5px;
            }

            .expiration_date {
              height: 32px;
              line-height: 32px;
              background: #ffffff;
              padding-right: 12px;
              border-radius: 4px;
              text-align: right;
            }

            .my_wallet {
              position: relative;
              .my_wallet_left {
                margin-top: 13px;
                margin-left: 12px;
                .rest_wallet {
                  font-size: 24px;
                  font-weight: 400;
                  color: #000000;
                  .frezz {
                    color: #000000;
                    font-size: 16px;
                  }
                  .textDesc {
                    font-size: 16px;
                    margin-right: 10px;
                  }
                  .extraDesc {
                    font-size: 16px;
                  }
                }
                .balance_text {
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.45);
                  margin-top: 8px;
                  margin-bottom: 12px;
                }
              }
              .my_wallet_right {
                position: absolute;
                top: 10px;
                right: 12px;
                img {
                  width: 49px;
                  height: 48px;
                }
              }
            }

            .bottom_content {
              height: 48px;
              background: #f7f9fa;
              border-radius: 0px 0px 4px 4px;
              border: 1px solid #e9e9e9;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #0052d9;
              font-size: 14px;
              padding-left: 200px;
              .default_button {
                position: relative;
                .frezz {
                  width: 100px;
                  position: absolute;
                  right: 86px;
                  top: -10px;
                }
              }

              .recharge_btn {
                padding-left: 12px;
              }
              .center_solid {
                width: 1px;
                height: 16px;
                line-height: 16px;
                background: #e8e8e8;
              }
              .select_box {
                margin-right: 25px;
                width: 98px;
                height: 37px;
                border-radius: 3px;
                border: 1px solid #0052d9;
                text-align: center;
                line-height: 37px;
                .select_text {
                  color: #0052d9;
                }
              }
            }
          }
        }
      }
    }
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
  margin-left: 15px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
// .el_row_reason {
//   margin-top: 10px;
// }

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.Create_recharge {
  padding: 0 30px;
}
.updatepsd {
  padding: 0 30px;
}

.table_list {
  .consumeColor {
    color: #66adfd;
  }
  .rechargeColor {
    color: red;
  }

  .disableColor {
    text-decoration: line-through;
  }
}
.content_boxs {
  margin-left: 75px;
}
</style>
